/* eslint-disable */
<template>
  <div class="filterType">
<!--    {{selectTypes}}-->
    <div class="row filterRow">
      <div class="title filterTitle">选择或搜索类型</div>
      <el-select
        class="selector"
        v-model="selectTypes"
        collapse-tags
        filterable
        size="mini"
        multiple placeholder="选择或搜索要展示的类型"
        @change="filterType"
      >
        <el-option
          v-for="item in typesArr"
          :key="item.id"
          :label="item.id + ' ' + item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
export default {
  name: "filterTypeComponent",
  data(){
    return {
      typesArr:[{
        id:0,
        name:"type1",
        hide:true
      },{
        id:112,
        name:"type2",
        hide:false
      }],
      KG: this.$parent.$parent.$parent.$parent.$refs.graphComponent.KG,
      selectTypes:[]
    }
  },
  created() {
    this.updateTypesArr();
  },
  watch:{
    "KG.update.typeList": {
      handler:function() {
        this.updateTypesArr();
      },
      deep:true
    }
  },
  methods:{
    filterType(){
      this.KG.modifyTypeShow(this.selectTypes);
    },
    updateTypesArr(){
      let _this = this;
      this.typesArr = this.KG.kgInfo.typeList;
      this.selectTypes = [];
      this.typesArr.forEach(function(type){
        if(type.hide) return;
        _this.selectTypes.push(type.id);
      });
    },
    //截取一部分字符串作为filter展示tags
    filterTagLabel(tag){
      if(tag.length<10) return tag;
      return tag.substring(0,7) + "...";
    }
  }
};
</script>

<style scoped>
.filterType .row .title{
  margin-left: 5px;
  margin-bottom: 5px;
  height: 20px;
  line-height: 20px;
  text-align: left;
  font-size: 10px;
}
.selector {
  width: 100%;
}
</style>